<template>
  <div>
    <el-tabs>
      <el-tab-pane label="历史公告" name="first">
        <el-table :data="tableData" style="width: 100%">
          <el-table-column prop="time" label="发布时间" width="180" />
          <el-table-column prop="title" label="公告标题" width="180" />
          <el-table-column prop="author" label="公告作者" width="180" />
          <el-table-column prop="body" label="公告内容" width="180"/>
          <el-table-column prop="isemail" label="是否发送考生邮箱" width="180" />
          <el-table-column prop="operation" label="操作" width="180">
            <template  #default="scope">
              <el-button type="primary" circle >
                <i class="el-icon-edit"></i>
              </el-button>
              <el-button type="danger" circle @click="DelAnnounce(scope.$index)">
                <i class="el-icon-delete"></i>
              </el-button>
              <el-button type="success" circle @click="LookAnnounce(scope.$index)">
                <i class="el-icon-view"></i>
              </el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-tab-pane>

      <el-tab-pane label="发布公告" name="second">
        <el-form :model="param" :rules="rules" ref="announce" label-width="80px">
          <el-form-item label="公告时间" prop="time">
            <el-input type="text" placeholder="公告显示发布的时间" size="small"
                      prefix-icon="el-icon-time"
                      v-model="param.time"></el-input>
          </el-form-item>
          <el-form-item label="公告标题" prop="title">
            <el-input type="text" placeholder="公告显示发布的标题" size="small"
                      prefix-icon="el-icon-connection"
                      v-model="param.title"></el-input>
          </el-form-item>
          <el-form-item label="公告作者" prop="title">
            <el-input type="text" placeholder="公告显示发布的标题" size="small"
                      prefix-icon="el-icon-connection"
                      v-model="param.author"></el-input>
          </el-form-item>
          <el-form-item label="公告内容" prop="content">
            <el-input placeholder="公告显示发布的内容" size="small"
                      prefix-icon="el-icon-news"
                      :autosize="{ minRows: 9, maxRows: 15 }"
                      type="textarea"
                      v-model="param.body"></el-input>
          </el-form-item>

          <el-form-item prop="isEmail">
            <el-checkbox v-model="param.isemail" label="是否发送到考生邮箱" size="large"></el-checkbox>
          </el-form-item>
          &nbsp;&nbsp;&nbsp;&nbsp;<el-button type="danger" @click="Submit">发布</el-button>
        </el-form>

      </el-tab-pane>
    </el-tabs>

  </div>
</template>

<script>
import ElementUI from "element-ui";

export default {
  //公告发布
  name: "AdminAnnounce",
  data(){
    return {
      tableData : [],
      param:{
        time:"",
        title:"",
        author:"",
        body:"",
        isemail:false,
      },
      rules: {
        time: [
          {required: true, message: "请输入公告显示发布的时间", trigger: "blur"}
        ],
        title: [
          {required: true, message: "请输入公告显示发布的标题", trigger: "blur"}
        ],
        content: [
          {required: true, message: "请输入公告显示发布的内容", trigger: "blur"}
        ],
      }
    }
  },
  mounted(){
    this.GetAnnounce()
  },
  methods:{
    GetAnnounce(){
      this.axios.post("showannounce"
      ).then((response) => {
        console.log(response.data)
        if (response.data['msg'] == "ok") {
          //this.tableData = response.data["announce"]
          this.tableData = []
          for( let i = 0 ; i < response.data["announce"].length ;  i++ ) {
            this.tableData.push({
              title: response.data["announce"][i]['title'],
              time: response.data["announce"][i]['time'],
              author: response.data["announce"][i]['author'],
              body: response.data["announce"][i]['body'].slice(0, 80) + "……",      //显示前100个字符
              isemail: response.data["announce"][i]['isemail']
            })
          }
        }
      })
    },
    DelAnnounce(index){
      console.log(index+" "+this.tableData[index])
      this.$confirm('此操作将删除该公告, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        let params = new URLSearchParams();
        params.append('time',this.tableData[index]['time']);
        params.append('title',this.tableData[index]['title']);
        this.axios.post("deleteannounce",
            params
        ).then((response) => {
          console.log(response.data)
          if (response.data['msg'] == "ok") {
            this.$forceUpdate()         //解决数据渲染延迟
            this.tableData = response.data["announce"]
            this.GetAnnounce();
          }
        })
        this.$message({
          type: 'success',
          message: '删除成功!'
        });
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });
    },
    LookAnnounce(index){
      let time = this.tableData[index]['time']
      let title = this.tableData[index]['title']
      this.$router.push("/announcement?title="+title+"&time="+time);
    },
    Submit(){
      this.$confirm('请确认公告是否无误，是否发布', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        //解决axios提交到后端为null的情况
        let params = new URLSearchParams();
        params.append('title', this.param.title);
        params.append('time', this.param.time);
        params.append('author', this.param.author);
        params.append('body', this.param.body);
        params.append('isemail', this.param.isemail);
        console.log(params)
        this.axios.post("addannounce",
            params
        ).then((response) => {
          console.log(response.data)
          console.log(response.data['msg'])
          if( response.data['msg'] == "ok"){
            ElementUI.Message({
              message: '成功发布公告',
              type: 'success'
            });
            this.GetCode();
          }else {
            ElementUI.Message({
              message: '发布公告失败，请检查后重试',
              type: 'error'
            });
          }
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消发布'
        });
      });

    }
  },
}
</script>

<style scoped>

</style>